<template>
  <div class="video">
    <div class="top">
      <div class="content" >
        <div class="video" style="display:table-cell;vertical-align:middle;">
          <video :src="ip+data.videoURL" preload="metadata" autoplay controls></video>
        </div>

        <span @touchend="back()">
          <yd-icon name="back" custom slot="icon" size="0.5rem"></yd-icon>
        </span>
        <span class="play" @click="play">
          <yd-icon name="videoPlay" custom slot="icon" size="0.5rem"></yd-icon>
        </span>
      </div>
      <div class="user">
        <div class="left">
          <img :src="data.userPhoto">
          <span>{{data.userName}}</span>
        </div>
        <div class="right">
          <div @click="follow()">关注</div>
        </div>
      </div>
    </div>
    <keep-alive>
      <comment  padding="5.5rem" :data="data"></comment>
    </keep-alive>

  </div>
</template>
<script>
  import $ from 'jquery'
  import comment from '@/components/comment'
  export default {
    components: {
      comment
    },
    data() {
      return {
        ip:this.$store.state.ip,
        data: null,
        show: true,
      }
    },
    methods: {
      back() {
        this.$router.back(-1)
      },
      play() {
        let video = $('.video video')[0];
//        console.log(video)
        if (this.show) {
          video.play();
          this.show = false
        } else {
          this.show = true;
          video.pause()
        }
        let th = this
        video.addEventListener('timeupdate', function () {
          if (video.ended) {  //判断视频数据是否存在，如果存在，进入页面立即播放视频
            th.show = true
          }
        });
      },
      follow() {   //动态关注
        alert('暂时还没有添加功能')
      },
    },
    activated() {
//      this.data = this.$route.params.data;
      this.data = this.$store.state.videoContent;
      setTimeout(()=>{
        if (this.data != null) {
          this.play()
//          console.log(this.data);
        }
      },500)


    },
    deactivated() {
//      this.data = null   //重置视频数据
    }
  }
</script>
<style lang="less" scoped>
  @import "~less/base";

  .video {
    font-size: 3.6rem;
    position: absolute;
    background: @read-bg;
    z-index: 40;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: scroll;
    > .top {
      height: 5.5rem;
      border-bottom: 1px solid #e8e8e8;
      position: fixed;
      width: 100%;
      top: 0;
      > .content {
        height: 4.5rem;
        width: 100%;

        position: relative;
        background: black;
        >.video{
          height: 4.5rem;
          > video {
            height: 100%;
            background: black;
            width: 100%;
          }
        }

        > span > i {
          position: absolute;
          top: 0.4rem;
          left: 0.4rem;
          color: #fff;
          z-index: 40;
        }
        >span:nth-child(3){
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 1rem;
          height: 1rem;
          border-radius: 50%;
          background: rgba(0,0,0,0.5);
          i {
            position: absolute;
            top:50%;
            left: 50%;
            color: #ffffff;
            transform: translate(-50%,-50%);
          }
        }
      }
      >.user {
        height: 1rem;
        font-size: 16px;
        background: white;
        > div {
          float: left;
          width: 50%;
          height: 100%;
        }
        .left {
          height: 100%;
          position: relative;
          > img {
            width: 0.8rem;
            height: 0.8rem;
            margin-left: 0.1rem;
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            border-radius: 50%;
            border: 1px solid @read-userPic;
          }
          > span {
            margin-left: 1rem;
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            font-size: 14px;
          }
        }
        .right{
          position: relative;
          >div{
            color: #ffffff;
            text-align: center;
            line-height: 0.6rem;
            width: 1.5rem;
            height: 0.6rem;
            background: #ff2424;
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            right: 0.5rem;
            border-radius: 4px;
          }

        }
      }
    }
  }
</style>
